<template>
    <div class="admin-layout">
        <div class="sidebar">
            <div class="logo">B海冷链海鲜直送</div>
            <div class="small-logo"><strong>系统管理员控制台</strong></div>
            <ul class="nav-list">
                <li class="nav-item account-management">
                    <span class="nav-title">账号管理</span>
                    <ul class="sub-nav-list">
                        <li @click="handleClick('customerAccounts')" class="sub-nav-item">顾客账号管理</li>
                        <li @click="handleClick('businessAccounts')" class="sub-nav-item">商家账号管理</li>
                        <li @click="handleClick('accountsStatistics')" class="sub-nav-item">总览与统计</li>
                    </ul>
                </li>
                <li class="nav-item product-management">
                    <span class="nav-title">商品管理</span>
                    <ul class="sub-nav-list">
                        <li @click="handleClick('allProduct')" class="sub-nav-item">查询与管理</li>
                        <li @click="handleClick('productStatistics')" class="sub-nav-item">总览与统计</li>
                    </ul>
                </li>
                <li class="nav-item order-management">
                    <span class="nav-title">订单与配送管理</span>
                    <ul class="sub-nav-list">
                        <li @click="handleClick('allOrders')" class="sub-nav-item">查询与管理</li>
                        <li @click="handleClick('ordersStatistics')" class="sub-nav-item">总览与统计</li>
                    </ul>
                </li>
                <li @click="handleClick('infoEdit')" class="nav-item admin-settings">管理员信息设置</li>
            </ul>
        </div>
        <div class="content">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
export default {
    name: 'AdminLayout',
    setup() {
        const router = useRouter();
        onMounted(() => {
            if(sessionStorage.getItem('userid') === null || sessionStorage.getItem('role') !== 'admin') {
                message.info('请登录！');
                router.push({ name: 'Login' });
            }
        });
        const handleClick = (key) => {
            console.log('Clicked:', key);
            // 这里可以添加路由跳转或其他逻辑
            if (key === 'customerAccounts') {
                router.push({ name: 'AdminCusManager' });
            } else if (key === 'businessAccounts') {
                router.push({ name: 'AdminBusManager' });
            } else if (key === 'accountsStatistics') {
                router.push({ name: 'AccountsStatistics' });
            } else if (key === 'allProduct') {
                router.push({ name: 'AllProdManager' });
            } else if (key === 'productStatistics') {
                router.push({ name: 'ProductStatistics' });
            } else if (key === 'allOrders') {
                router.push({ name: 'AllOrdersManager' });
            } else if (key === 'ordersStatistics') {
                router.push({ name: 'OrdersStatistics' });
            } else if (key === 'infoEdit') {
                router.push({ name: 'AdminInfoEditor' });
            } else {
                console.error('Invalid key:', key);
            }
        }
        return {
            handleClick,
        };
    },
}
</script>

<style src="../../assets/styles/adminLayout.css" scoped></style>